<template>
    <div>
        <p style="text-align: right;">
            <el-button type="primary" @click="add">增加
            </el-button>
        </p>
        <!--表格内容-->
        <el-table ref="list" :data="tableData" style="width: 100%; margin-bottom: 5px;margin-top: 10px;" border
            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
            <el-table-column property="title" label="名称">
            </el-table-column>
            <el-table-column property="imgurl" label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.imgurl" alt="图片" style="width:100%;height:100px">
                </template>
            </el-table-column>
            <el-table-column property="linkurl" label="跳转链接">
                <template slot-scope="scope">
                    <el-link :underline="false" :href="scope.row.linkurl">{{ scope.row.linkurl }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="rowEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="rowDel(scope.row.id);">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size="10" :total="100"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- 弹出层 -->
        <carousel-chart-add ref="carouselChartAdd" v-if="addShow" :addShow="addShow" @dialogClose="dialogClose"
            @getList="getList">
        </carousel-chart-add>
        <carousel-chart-edit ref="carouselChartAdd" v-if="editShow" :editShow="editShow" @dialogClose="dialogClose"
            @getList="getList" :recorder="formFileds"></carousel-chart-edit>
    </div>
</template>

<script>
import CarouselChartAdd from './carouselChartAdd.vue';
import CarouselChartEdit from './carouselChartEdit.vue';
import { getChart, deleteChart } from '@/api/personal/carouselChartManage';

export default {
    name: "carouselChartManage",
    components: {
        CarouselChartAdd,
        CarouselChartEdit
    },
    data () {
        return {
            formFileds: {},
            tableData: [],
            addShow: false,
            editShow: false
        }
    },
    methods: {

        dialogClose () {

            this.addShow = false;
            this.editShow = false;
        },

        rowEdit (row) {
            // this.$refs.detailRef.handleEdit('qqqq')

            // //当前选中行
            this.formFileds = row;
            this.editShow = true;
        },

        rowDel (id) {
            // 让当前删除按钮失焦
            // event.target.blur();

            this.$confirm('确定要删除当前行吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deleteChart('id=' + id).then((res) => {
                    this.$message.success('删除成功');
                    this.getList();
                })
            });
        },
        add () {
            this.addShow = true
        },

        getList () {
            if (localStorage.getItem('companyId')) {
                getChart('qyid='+localStorage.getItem('companyId')).then((res) => {
                    this.tableData = res.data

                })
            } else {
                return this.tableData
            }
        }
    },
    mounted () {
        this.getList()
    }
}
</script>

<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}
</style>
